<template>
<div class="main">
    <div class="all">
        <div class="infoname">系统类型
        </div>
        <div class="infoA">{{type}}</div>
    <div v-show="display">
        <div class="infoname">最新版本
        </div>
        <div class="infoA">{{version}}</div>
    </div>
    </div>

    <div class="all">
        <div class="infoname">服务程序版本
        </div>
        <div class="infoA">{{total_ram}}</div>

    <div v-show="display">
        <div class="infoname">最新版本
        </div>
        <div class="infoA">{{version}}</div>
    </div>

    </div>

    <div class="all">
        <div class="infoname">WEB服务器版本
        </div>
        <div class="infoA">{{cpu_type}}</div>

    <div v-show="display">
        <div class="infoname">最新版本
        </div>
        <div class="infoA">{{version}}</div>
    </div>

    </div>
    <div class="update">
     <el-form>
    <el-form-item>
                <el-button type="warning" @click="open()">检查更新</el-button>
                <el-button type="success" @click="push()">升级</el-button>
            </el-form-item>
    </el-form>
    </div>
    <!-- <h1 style="position: absolute; bottom: 3%; right: 5%;"> 10511工作室&nbsp;版权所有</h1> -->
</div>
</template>

<script>
//引入mapState
import {
    mapState
} from 'vuex'
export default {
    data() {
        return {
            display: false,
        }
    },
    methods: {
        getsysteminfo() {
            this.$store.dispatch('GET_SYSTEMINFO');
        },
    },
    mounted: function () {
        this.getsysteminfo();
    },
    computed: mapState({ //步骤二,对象方式
        version: state => state.systeminfo.version,
        type: state => state.systeminfo.type,
        uptime: state => state.systeminfo.uptime,
        total_ram: state => state.systeminfo.total_ram,
        free_ram: state => state.systeminfo.free_ram,
        cpu_use: state => state.systeminfo.cpu_use,
        cpu_type: state => state.systeminfo.cpu_type,
        freq: state => state.systeminfo.freq,
        buffer_ram: state => state.systeminfo.buffer_ram,
        //可修表单数据
        serial: state => state.systeminfo.serial,
        ip: state => state.systeminfo.ip,
        mask: state => state.systeminfo.mask,
        network: state => state.systeminfo.network,
        dns: state => state.systeminfo.dns,
        form: function () {
            return this.$store.state.systeminfo
        },

    }),
     methods: {
        open() {
            this.display = true;
        },
     }

}
</script>

<style scoped>
.main {
    display: block;
    height: 600px;
    width: 100%;
}

.el-input {
    background-color: blanchedalmond;
    color: black;
}

.update {
    position: absolute;
   bottom: 100px;
   left: 700px;
}

.all {
    margin-top: 10px;
    margin-left: 100px;
}

.infoname {
    display: inline-block;
    height: 40px;
    width: 120px;
    background-color: azure;
    text-align: center;
    line-height: 50px;
    margin-bottom: 5px;
}

.infoA {
    display: inline-block;
    height: 40px;
    width: 200px;
    background-color: blueviolet;
    text-align: center;
    line-height: 50px;
    margin-bottom: 5px;
}
</style>
